<template>
    <div class="left-bottom">
        <div class="left-bottom-module1">
            <Title title="聚类分析"></Title>
            <div class="left-bottom-module1-list">
                <div class="left-bottom-module1-list-item" v-for="(v, k) in state.list" :key="k">
                    <div class="left-bottom-module1-list-item-data">
                        <span class="left-bottom-module1-list-num"> {{ v.num }}</span>
                        <img src="@/images/index/dizuo.png" alt="" />
                    </div>
                    <div class="left-bottom-module1-list-item-name">
                        {{ v.name }}
                    </div>
                </div>
            </div>
        </div>
        <div class="left-bottom-module2">
            <Title title="语言分析"></Title>
            <div class="left-bottom-module2-wapper">
                <div class="animate">
                    <div class="animate-base">
                        <div class="animate-base-list u_p3d"
                            :style="'transform:rotateX(70deg) rotateY(0deg) rotateZ(' + state.deg + 'deg)'">
                            <div class="animate-base-list-item u_p3d" v-for="(v, k) in state.items" :key="k"
                                :style="animateIndex(state.items.length, k)">
                                <div class="animate-base-list-item-content" :style="'transform: rotateY(' +
                                    (state.deg - (360 / state.items.length) * k) +
                                    'deg)'
                                    ">
                                    <div class="animate-base-list-item-content-text">{{ v.text }}</div>
                                    <div class="animate-base-list-item-content-number">{{ v.number }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="left-bottom-module2-wapper-center">
                    <div class="left-bottom-module2-wapper-center-text1">
                        大类： <span> 6</span>

                    </div>
                    <div class="left-bottom-module2-wapper-center-text2">
                        小类： <span> 24</span>
                    </div>
                    <div class="left-bottom-module2-wapper-center-text3">
                        项： <span> 112</span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import chart from '@/components/echarts-box.vue'
import Title from '../common/title.vue'
import data from './leftTop'
const state: any = reactive({
    list: [
        { name: '密度聚类分析', num: '320' },
        { name: '层次聚类分析', num: '180' },
    ],
    items: [
        { text: 'C语言', number: 39, left: 0, top: 6 },
        { text: 'C++', number: 20, left: 2, top: 0 },
        { text: 'Ruby', number: 11, left: 17, top: -2 },
        { text: 'Pathon', number: 2, left: 19, top: 4 },
        { text: 'JAVA', number: 43, left: 10, top: 7 },
    ],
    timer: null,
    deg: 0

})
onMounted(() => {
    runAnimate()
})
const runAnimate = () => {
    if (state.timer) {
        clearInterval(state.timer)
    }
    state.timer = setInterval(() => {
        state.deg += 1
    }, 100)
}
const animateIndex = (total, index) => {
    let zIndex = 9
    let color = '#FFF'
    const deg = (360 / total) * index
    if (deg >= 0 && deg <= 180) {
        zIndex = 3
    }
    return `transform: rotateX(-90deg) rotateY(${deg}deg) translate(-50%,-50%);
      color:${color};z-index:${zIndex}`
}
</script>
<style lang="less" scoped>
.u_p3d {
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
}

.animate {
    position: absolute;
    width: 500px;
    height: 500px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;

    &-base {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        transform: translate(-50%, -50%);

        &-list {
            -webkit-transform: rotateX(80deg) rotateY(0deg);
            transform: rotateX(80deg) rotateY(0deg);
            position: relative;
            width: 250px;
            height: 250px;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transition: all 0.1s linear;

            &-item {
                transform-origin: 180px 0px;
                position: absolute;
                top: 50%;
                left: -10%;
                width: 100px;
                height: 120px;
                cursor: pointer;
                color: #fff;
                font-size: 26px;

                &-content {
                    position: absolute;
                    width: 103px;
                    height: 69px;
                    background: url(@/images/index/item.png) no-repeat;
                    background-size: 100% 100%;

                    &-text {
                        position: absolute;
                        left: 20px;
                        top: 52%;
                        transform: translateY(-50%);
                        font-size: 15px;
                        font-weight: normal;
                        color: #FFFFFF;
                    }

                    &-number {
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        font-size: 17px;
                        font-weight: normal;
                        font-style: italic;
                        color: #FFFFFF;
                    }
                }
            }
        }
    }
}

.left-bottom {
    position: absolute;
    left: 20px;
    top: 50%;
    width: 400px;
    height: 450px;
    display: flex;
    flex-direction: column;

    &-module1 {
        &-list {
            margin: 20px 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            text-align: center;
            position: relative;

            &-item {
                width: 50%;
                position: relative;
                margin: 10px 0;
                color: #6af2ff;

                &-data {
                    position: relative;

                    span {
                        left: 41%;
                        position: absolute;
                        // top: -2%;
                        width: 34px;
                        height: 23px;
                        font-size: 14px;
                        font-weight: bold;
                        line-height: 21px;
                        text-align: center;
                        animation: upAndDown 3s ease 0s infinite;
                        color: #ffe16a;
                    }

                    img {
                        width: 80px;
                        height: 50px;
                    }
                }
                &-name{
                    font-size: 14px;
                }
            }
        }
    }

    &-module2 {
        flex: 1;

        &-wapper {
            margin-top: 80px;
            width: 468px;
            height: 170px;
            background: url(@/images/index/bg1.png) no-repeat;
            background-size: 100% 100%;
            position: relative;



            &-center {
                position: absolute;
                width: 159px;
                height: 159px;
                left: 150px;
                z-index: 99;
                top: -40px;
                background: url(@/images/index/circle.png) no-repeat;
                background-size: 100% 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                &-text1,
                &-text2,
                &-text3 {
                    font-size: 13px;
                    font-weight: normal;
                    font-style: italic;
                    color: #FFFFFF;

                    span {
                        font-size: 19px;
                        font-weight: normal;
                        font-style: italic;
                        color: #FFFFFF;
                    }
                }
            }
        }
    }
}

@keyframes upAndDown {
    0% {
        bottom: 40px;
    }

    50% {
        bottom: 50px;
    }

    100% {
        bottom: 40px;
    }
}</style>